<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="dist/vue.js"></script>
</head>
<body>
    <!-- 
      MVX包括： MVC MVP MVVM
      MVC : Model  View  Controller  数据 试图  控制器  -- 一般出现在后端语言当中 -- 最先出现在Java领域 ， 前端语言做不到完全的MVC之间的区分
      MVP : Model  View  Presenter
      MVVM : Model  View  ViewModel :基于 MVC的设计， 数据和视图做了分离，大大减少了  DOM操作  -- 中介

      首先申明： 不管是react 还是vue,它们都不是MVVM框架，只是有借鉴MVVM的思路
      MVC、 MVP、 MVVM 是三种常见的前端架构模式，通过分离关注点来改进代码组织方式。MVC模式是MVP、MVVM模式的基础。 MVP和MVVM更像是MVC的改良版。  MV分别是： model(模型) view(视图) 

    一、MVC：model   view  controller(控制器)
     视图view: 用户界面，只负责渲染HTML
     控制器controller: 业务逻辑，负责调度model 和 view 
     模型model: 数据保存，只负责存储数据、请求数据、更新数据

     MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对：view操作交给controller处理、在controller中响应view 的事件调用model的接口对数据进行操作，一旦model发生变化便通知相关视图view进行更新。
     接受用户指令时，MVC可以分成两种方式。一种是通过view接受输入，传递给controller。另一种是直接通过controller接受指令。

     但MVC有一个巨大的缺陷： 控制器承担的责任太大了，随着项目愈加复杂，控制器中的代码会越来越臃肿，导致出现不利于维护的情况。

    二、MVP：
     MVP模式将 controller 改名为 presenter， 同时改变了通信方向。
     与MVC最大的区别就是view 和 model层完全解耦，不存在依赖关系，而是通过presenter做桥梁，用于操作view层发出的事件传递到presenter层中，presenter层去操作model层，并且将数据再返回给view层，整个过程中view层和model层完全没有联系。

    三、MVVM：
     MVVM模式将presenter改名为 ViewModel, 基本上与MVP模式完全一致。唯一的区别是MVVM采用双向绑定，view的变动自动反映在ViewModel上。


    这里拿典型的MVVM模式的代表vue来举例：
    html部分： 相当于view层，可以看到这里的view通过模板语法来声明式的将数据渲染进DOM元素，当ViewModel对model进行更新时，通过数据绑定更新到view。
    
    vue实例中的data相当于model层，而ViewModel层的核心是vue中的双向数据绑定，即model变化时view可以实时更新，view变化也能让model发生变化。

    整体来看，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不能再用选择器操作DOM元素。因为在MVVM中，view不知道model的存在，model和 ViewModel也观察不到view,这种低耦合模式提高代码的可重用性。
    
    除了view、model 和 ViewModel, 其实在MVVM中还引入了一个隐式的Binder层，实现了view和  ViewModel 的绑定，这个 隐式的Binder层就是 vue通过解析模板中的插值和指令从而实现view和  ViewModel 的绑定。

    对于MVVM来说，其实最重要的并不是通过双向绑定或者其他的方式将view与ViewModel绑定起来，而是通过ViewModel将视图中的状态和用户的行为分离出一个抽象，这才是MVVM的精髓。

    -->
    <div id="app">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">点击逆转单词</button>
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#app',
        data:{ // 
            message:'hello MVVM'
        },
        methods: {
            reverseMessage:function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>
</html>